{include file="public/header"}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据统计</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/tt.css" />
    <link href="__JSS__/plugins/layui/css/layui.css" rel="stylesheet">
    <style>
        .out{
            width: 1200px;
            background-color: #fff;
            margin: auto;
            padding: 30px;
            box-sizing: border-box;
        }


        .time{
            width:160px;
            height:34px;
            background:rgba(255,255,255,1);
            border-radius:2px;
            border:1px solid rgba(238,238,238,1);
            font-size:12px;
            color:#999;
            padding-left: 10px;
            line-height: 34px;
        }
        .zhi{
            font-size:14px;
            color:#333;
            line-height: 36px;
            margin: 0 10px;
        }
        .all_time{
            display: flex;
            justify-content: flex-start;

        }
        .ka_title{
            font-weight:500;
            color:rgba(51,51,51,1);
            font-size: 18px;
            line-height:25px;
            padding: 40px 0 30px 15px;
            position: relative;
        }
        .ka_title span{

            position: absolute;
            width:5px;
            height:22px;
            background:rgba(42,99,231,1);
            border-radius:3px;
            left: 0;
            top: 43px;
        }
        .chart1{
            width:437px;
            height:342px;
            background:#2A63E7;
            box-shadow:0px 2px 10px 0px rgba(216,216,216,0.5);
            border-radius:5px;
        }
        .chart1_in{
            position: relative;
            top: 5px;
            height: 337px;
            background-color: #fff;
            border-bottom-left-radius:5px;
            border-bottom-right-radius:5px;
        }
        .ka_get{
            font-weight:500;
            color:#333;
            font-size: 14px;
            line-height: 22px;
            padding: 20px 20px 0;
        }


        .chart {
            height: 8rem;
            width: 100%;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 8px 15px 5px rgba(200, 199, 203, 0.3);
            border-radius: 15px;
            margin-top: 0.75rem;
            padding: 1rem;
        }
        .item_two{
            display: flex;
            justify-content: flex-start;
        }

        .c_f_title {
            color: #000000;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .chart_four_item {
            margin-bottom: 40px;
            width: 160px;
            margin-right: 48px;
            float: left;
        }

        .c_f_b {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .bai {
            color: rgba(0, 0, 0, 0.85);
            font-size: 24px;
        }

        .c_four1 {
            width: 64px;
            height: 64px;
        }
        .chart11 {
            height: 100%;
        }
        .selectttt22{
            margin-left:30px;
            width:68px;
            height:34px;
            background:dodgerblue;
            border-radius:3px;
            text-align: center;
            line-height:34px;
            font-size:12px;
            font-weight:400;
            color:rgba(255,255,255,1);
            border: none;
        }
    </style>
</head>
<body>
<div class="tt_top3">
    <div class="tt_top33">数据统计</div>
</div>
<div class="out">

    <div class="all_time">
        <input type="text" readonly id="start" onfocus="wk.lay_date(this);" value="{$start}"  class="layui-input layer-date time" placeholder="开始日期" />
        <div class="zhi">至</div>
        <input type="text" readonly id="end" onfocus="wk.lay_date(this);" value="{$end}" class="layui-input layer-date time" placeholder="结束日期" />
        <div>
            <button class="selectttt22 hand_icon" id="search">搜索</button>
            <button class="selectttt22 hand_icon" id="clear" style="background-color: cornflowerblue">重置</button>
        </div>
    </div>

    <div class="item">
        <div class="ka_title"><span></span>卡券任务总数：{$data['all_get'] + $data['all_not_get']}</div>
        <div class="item_two">
            <div class="chart1" style="margin-right:90px;">
                <div class="chart1_in">
                    <div class="ka_get">卡券领取情况</div>
                    <div class="e_item">
                        <div id="main1" class="chart11"></div>
                    </div>
                </div>
            </div>
            <div class="chart1">
                <div class="chart1_in">
                    <div class="ka_get">卡券核销情况</div>
                    <div class="e_item">
                        <div id="main2" class="chart11"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="ka_title"><span></span>任务数据</div>
        <div class="item_two">
            <div class="chart1" style="margin-right:90px;">
                <div class="chart1_in">
                    <div class="ka_get">任务数据</div>
                    <div class="e_item">
                        <div id="main3" class="chart11"></div>
                    </div>
                </div>
            </div>
            <div class="chart1" style="margin-right:90px;">
                <div class="chart1_in">
                    <div class="ka_get">达人任务数统计</div>
                    <div class="e_item">
                        <div id="main4" class="chart11"></div>
                    </div>
                </div>
            </div>

        </div>
        <div class="item_two" style="margin-top:30px;">
            <div class="chart1" style="margin-right:90px;">
                <div class="chart1_in">
                    <div class="ka_get">普通任务数统计</div>
                    <div class="e_item">
                        <div id="main5" class="chart11"></div>
                    </div>
                </div>
            </div>
            <div class="chart1" style="margin-right:90px;">
                <div class="chart1_in">
                    <div class="ka_get">活动任务数统计</div>
                    <div class="e_item" style="padding:20px 0 20px 20px;">
                        <!-- <div id="main1" class="chart11"></div> -->
                        <div class="chart_four">
                            <div class="chart_four_item">
                                <div class="c_f_title">话动任务领取数</div>
                                <div class="c_f_b">
                                    <div class="bai">{$data['hd_get_bai']}%</div>
                                    <div class="c_four1" id="main61"></div>
                                </div>
                            </div>
                        </div>
                        <div class="chart_four">
                            <div class="chart_four_item">
                                <div class="c_f_title">话动任务待领取数</div>
                                <div class="c_f_b">
                                    <div class="bai">{$data['hd_not_get_bai']}%</div>
                                    <div class="c_four1" id="main62"></div>
                                </div>
                            </div>
                        </div>
                        <div class="chart_four">
                            <div class="chart_four_item">
                                <div class="c_f_title">话动任务待审核数</div>
                                <div class="c_f_b">
                                    <div class="bai">{$data['hd_not_use_bai']}%</div>
                                    <div class="c_four1" id="main63"></div>
                                </div>
                            </div>
                        </div>
                        <div class="chart_four">
                            <div class="chart_four_item">
                                <div class="c_f_title">话动任务已审核数</div>
                                <div class="c_f_b">
                                    <div class="bai">{$data['hd_use_bai']}%</div>
                                    <div class="c_four1" id="main64"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

</body>
{include file="public/footer"}
<script src="__JSS__/echarts.min.js" ></script>
<script src="__JSS__/wk.js"></script>
<script src="__JSS__/plugins/layui/layui.js"></script>
<script>
    $('#search').click(function () {
        var start = $('#start').val();
        var end = $('#end').val();
        if(start && end){
            location.href="{:url('shop/Index/tongji')}?start=" + start + "&end=" + end;
        }else{
            alert('日期不能为空');
            return false;
        }
    });
    $('#clear').click(function () {
        location.href="{:url('shop/Index/tongji')}";
    });
    one();
    two();
    three();
    four();
    five();
    six('main61',{$data['hd_get']},{$data['hd_not_get']},'已领取数','待领取数','#01A1FF');
    six('main62',{$data['hd_not_get']},{$data['hd_get']},'待领取数','已领取数','#4EC975');
    six('main63',{$data['hd_not_use']},{$data['hd_use']},'待审核数','已审核数','#FCD437');
    six('main64',{$data['hd_use']},{$data['hd_not_use']},'已审核数','待审核数','#FF5679');
    function one() {
        var myChart = echarts.init(document.getElementById('main1'));
        var option = {
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
//                bottom: '3%',
                top: '5%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['领取数量', '剩余数量'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '数量',
                    type: 'bar',
                    barWidth: '20%',
                    data: [{$data['all_get']}, {$data['all_not_get']}],
                    itemStyle: {
                        normal: {
                            color: function (params) { // 给出颜色组
                                var colorList = ['#59ADFE', '#56D2D6'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
    function two() {
        var myChart = echarts.init(document.getElementById('main2'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['核销数量', '待核销数量']
            },
            series: [
                {
                    name: '数量',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [
                        {value: {$data['all_use']}, name: '核销数量'},
                        {value: {$data['all_not_use']}, name: '待核销数量'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: function (params) { // 给出颜色组
                                var colorList = ['#59ADFE', '#56D2D6'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
    function three() {
        var myChart = echarts.init(document.getElementById('main3'));
        var option = {
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
//                bottom: '3%',
                top: '5%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['总任务数', '达人任务数', '普通任务数', '活动任务数'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '数量',
                    type: 'bar',
                    barWidth: '40%',
                    data: [{$data['all_task']}, {$data['all_dr_task']}, {$data['all_pt_task']}, {$data['all_hd_task']}],
                    itemStyle: {
                        normal: {
                            color: function (params) { // 给出颜色组
                                var colorList = ['#59ADFE', '#A577EA', '#65D486', '#F57991'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
    function four() {
        var myChart = echarts.init(document.getElementById('main4'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['已领取数', '待领取数', '待审核数', '已审核数']
            },
            series: [
                {
                    name: '数量',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: {$data['dr_get']}, name: '已领取数'},
                        {value: {$data['dr_not_get']}, name: '待领取数'},
                        {value: {$data['dr_use']}, name: '待审核数'},
                        {value: {$data['dr_not_use']}, name: '已审核数'},
                    ],
                    itemStyle: {
                        normal: {
                            color: function (params) { // 给出颜色组
                                var colorList = ['#5AADFE', '#975FE6','#69D288', '#F3627A'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
    function five() {
        var myChart = echarts.init(document.getElementById('main5'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['已领取数', '待领取数', '待审核数', '已审核数']
            },
            series: [
                {
                    name: '数量',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: {$data['pt_get']}, name: '已领取数'},
                        {value: {$data['pt_not_get']}, name: '待领取数'},
                        {value: {$data['pt_use']}, name: '待审核数'},
                        {value: {$data['pt_not_use']}, name: '已审核数'},
                    ],
                    itemStyle: {
                        normal: {
                            color: function (params) { // 给出颜色组
                                var colorList = ['#5AADFE', '#975FE6','#69D288', '#F3627A'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
    function six(div,up,down,up_str,down_str,color) {
        if(up == 0){
            color = '#F2F2F4';
        }
        var myChart = echarts.init(document.getElementById(div));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            series: [
                {
                    name: '数量',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: up, name: up_str},
                        {value: down, name: down_str}
                    ],
                    itemStyle: {
                        normal: {
                            color: function (params) { // 给出颜色组
                                var colorList = [color, '#F2F2F4'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
</script>
